<template>
	<view class="page-index">
		<view class="index-banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in inswiper" :key="index">
					<view class="swiper-item">
					<image :src="item.one"></image>
					</view>
				</swiper-item>
				
			</swiper>
			广告图
		</view>
		<view class="index-tools">
			<!-- 金刚区功能图标 -->
			<view class="index-tools-item" v-for="(item,index) in toolsList" :key="index">
				<view class="item-img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="index-title">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="index-title">
			<view class="title-line">


			</view>
			<view class="title-name">
				最 新 文 章

			</view>
			<view class="title-line">


			</view>
		</view>


		<view class="index-article">
			<view class="index-article-item"  v-for="(item,index) in articletList" :key="index">
				<view class="article-left">
					<view class="article-img">
						<image :src="item.img" mode=""></image>
					</view>
				</view>

				<view class="article-right">
					<view class="article-heder">
						<view class="title">
							{{item.title}}
							<!-- 文章标题 -->
						</view>

						<view class="info">
							{{item.info}}
                           <!-- 文章概要 -->
						</view>

					</view>

					<view class="article-footer">
						<view class="user">
							<view class="user-img">
								
							</view>
							{{item.user}}
<!-- 							用户 -->
						</view>
						<view class="time">
							{{item.time}}
							
							<!-- 时间 -->
						</view>
					</view>

				</view>

			</view>

		</view>
		
		
		
		<view class="index-title">
			<view class="title-line">


			</view>
			<view class="title-name">
				热 门 商 品

			</view>
			<view class="title-line">

			</view>
		</view>

		<view class="index-goods">
			<view class="index-goods-list"  v-for="(item,index) in goods" :key="index">
				<image :src="item.img" alt=""></image>
				<view class="index-goods-title">
					{{item.title}}
				</view>
				<view class="index-goods-whole">
					<view class="index-goods-whole-left">
						{{item.content}}
					</view>
					<view class="index-goods-whole-right">
						{{item.number}}
					</view>
				</view>
				<view class="index-goods-all">
					<view class="index-goods-all-price">
						{{item.price}}
					</view>
					<view class="index-goods-all-goods">
						{{item.goods}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				inswiper:[{
					one:"../../static/y1.png"
				},{
					one:"../../static/y2.png"
				},{
					one:"../../static/y2.png"
				},],
				goods:[{
					img:"../../static/xyj.png",
					title:"全自动-卷出新衣",
					content:"国庆狂欢",
					number:"满3500立减100",
					price:"￥3468.00",
					goods:"已售1000+"
				},{
					img:"../../static/np.png",
					title:"全自动-卷出新衣",
					content:"国庆狂欢",
					number:"满3500立减100",
					price:"￥3468.00",
					goods:"已售1000+"
				},{
					img:"../../static/pan.png",
					title:"全自动-卷出新衣",
					content:"国庆狂欢",
					number:"满3500立减100",
					price:"￥3468.00",
					goods:"已售1000+"
				},{
					img:"../../static/sofa.png",
					title:"全自动-卷出新衣",
					content:"国庆狂欢",
					number:"满3500立减100",
					price:"￥3468.00",
					goods:"已售1000+"
				},{
					img:"../../static/shuma.png",
					title:"全自动-卷出新衣",
					content:"国庆狂欢",
					number:"满3500立减100",
					price:"￥3468.00",
					goods:"已售1000+"
				},{
					img:"../../static/maoj.png",
					title:"全自动-卷出新衣",
					content:"国庆狂欢",
					number:"满3500立减100",
					price:"￥3468.00",
					goods:"已售1000+"
				}],
				title: 'Hello',
				toolsList: [{
						img: "../../static/数码.png",
						title: "数码",
					},{
						img: "../../static/文具.png",
						title: "文具"
					},{
						img: "../../static/母婴.png",
						title: "母婴"
					}, {
						img: "../../static/家电.png",
						title: "家电"
					}, {
						img: "../../static/日用.png",
						title: "日用"
					}
				],
				articletList:[{
					img:"../../static/特困生.jpg",
					title:"班主任视角里的学生小动作",
					info:"班主任视角里的学生，小动作是如此清晰。网友：眼睛快睁开啊，老师拍你了。",
					user:"海外网",
					time:"2024-09-25 15：10"
				},
				{
					img:"../../static/野猪.jpeg ",  
					title:"野猪泛滥已危害全国26省份",
					info:"    近日，宁夏在赏金招募“野猪猎人”，引发关注。据了解，野猪泛滥已危害全国26.........",
					user:"新闻封面",
					time:"2024-09-26 12：10"
				},
				{
					img:"../../static/稻田.jpeg",
					title:"秋天,一幅五彩斑斓的丰收画卷",
					info:"金秋时节，各地秋粮展开大面积收获，在希望的田野上，呈现出一派丰收景象。",
					user:"央视新闻",
					time:"2024-09-25 21：15"
				},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>


<style lang="scss">
	.index-goods-list{
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		margin-right: 10px;
		border-radius: 20px;
		margin-bottom: 10px;
		image{
			width: 100%;
		}
	}
	.index-banner {
		width: 100%;
	}
	.swiper {
		height: 300px;
	}
	.swiper-item {
		height: 300px;
		line-height: 300px;
		text-align: center;
	}
	.index-goods-image {
		width: 100%;
	}
	
	.index-goods {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
	.index-goods-all-goods {
		font-size: 20px;
		color: #F7BDBD;
	}

	.index-goods-all-goods {
		margin-left: 80px;
		font-size: 20px;
	}
	.index-goods-all-price {
		font-size: 25px;
		color: #FF0000;
		font-weight: 600;
		margin-left: 10px;
	}
	.index-goods-all {
		display: flex;
		align-items: center;
	}
	.index-goods-whole-right {
		margin-left: 10px;
		color: #E46948;
	}
	.index-goods-whole-left {
		font-size: 25px;
		color: #FF0000;
		font-weight: 600;
		margin-left: 10px;
	}
	.index-goods-whole {
		display: flex;
		align-items: center;
	
	}
	.index-goods-title {
		font-size: 25px;
		font-weight: 500;
		margin-top: 10px;
		margin-left: 10px;
	}
	.page-index {

		.index-tools {
			display: flex;

			.index-tools-item {
				flex: 1;
				display: flex;
				// 把内容布局改成纵向
				flex-flow: column;
				justify-content: cneter;
				align-items: center;

				.item-img {
					width: 48px;
					height: 48px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-title {
					font-size: 12px;
					line-height: 24px;
				}
			}
		}

		.index-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title-name {
				font-size: 22px;
				font-weight: 600;
				// background-color: red;
				width: 120px;
				text-align: center;

			}

			.title-line {
				width: 100%;
				flex: 1;
				height: 2px;
				background-color: black;
			}
		}

		.index-article-item {
			border-radius: 20px;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			padding: 10px;
			.article-left{
				// position: absolute;
				// left: 11px;
				// top: 10px;
				width: 90px;
				height: 100px;
				.article-img{
					width: 100%;
					height: 100%;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
			.article-right{
				flex: 1;
				padding-left: 12px;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
				
				.article-footer{
					width: 100%;
					display: flex;
					justify-content: space-between;
				}
			}
			
			
			
		}

	}
</style>